<template>
  <el-dialog
    custom-class="reject-dialog"
    size="small"
    title="确定退回所选成果？"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false">
    <p>将这份成果退回后，除非老师对其重新修改，否则将不会在学院的列表中显示，并不会删除教师端中老师的文件。</p>
    <el-radio-group v-model="reason" @change="handleChange">
      <el-radio :label="0">数据不全</el-radio>
      <el-radio :label="1">时间有误</el-radio>
      <el-radio :label="2">其他</el-radio>
    </el-radio-group>
    <el-input :class="{'is-error': warning}" placeholder="请在此输入退回成果的问题描述" v-model="detail" @change="changeDetail" />
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="confirmReject" :loading="loading">确认退回</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>

const details = [
  '老师您好，您的此份成果数据不全，请补充后再次提交',
  '老师您好，您的此份成果时间有误，请修改后再次提交',
  '',
];

export default {
  data() {
    return {
      reason: null,
      detail: null,
      details: [],
      loading: false,
      warning: false,
      dialogVisible: false,
    };
  },
  props: {
    id: [Number, String],
    staffId: [Number, String],
    multiple: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    handleChange(value) {
      this.detail = this.details[value];
    },
    show() {
      this.dialogVisible = true;
      this.details = JSON.parse(JSON.stringify(details));
      this.reason = 0;
      this.loading = false;
      this.warning = false;
      this.detail = details[0];
    },
    changeDetail(value) {
      if (value && value.trim()) {
        this.$set(this.details, this.reason, value);
        this.warning = false;
      }
    },
    confirmReject() {
      if (!this.detail.trim()) {
        this.warning = true;
        return false;
      }
      this.loading = true;
      if (this.multiple) {
        // multipleRejectAchiv({
        //   achiv_ids: this.id,
        //   reason: this.detail,
        // })
        //   .then(({data}) => {
        //     this.loading = false;
        //     this.$message.success('操作成功');
        //     this.$emit('confirm', this.id);
        //   })
        //   .catch(err => {
        //     console.log(err);
        //     this.loading = false;
        //     this.$message.error('操作失败');
        //   });
      } else {
        // rejectAchievement({
        //   achiv_id: this.id,
        //   reason: this.detail,
        //   staff_id: this.staffId
        // })
        //   .then(({data}) => {
        //     this.loading = false;
        //     this.$message.success('操作成功');
        //     this.$emit('confirm', this.id);
        //   })
        //   .catch(err => {
        //     console.log(err);
        //     this.loading = false;
        //     this.$message.error('操作失败');
        //   });
      }
    },
  }
}
</script>
<style lang="scss">
  .reject-dialog {
    padding: 30px 20px 10px;
    .el-dialog__title {
      font-size: 22px;
      color: #1f2d3d;
    }
    .el-dialog__body {
      font-size: 16px;
      p {
        margin-bottom: 20px;
      }
      .el-radio-group {
        margin-bottom: 20px;
      }
    }
    .el-input.is-error {
      input {
        border: 1px solid #d9534f;
      }
    }
  }
</style>
